<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" id="addValueEle">
        <button id="addBtnEle">添加</button>
    </div>
    <ul id="todosList">

    </ul>
    <p>统计: <span id="finishedTotal">1</span>/<span id="total">3</span></p>
    <div id="buttons"></div>
    <script>
        const todosList = document.querySelector('#todosList');

        const todosData = [
            { id: 1, value: '学习HTML', finished: false },
            { id: 2, value: '学习CSS', finished: true },
            { id: 3, value: '学习JS', finished: false },
        ];

        const buttonsData = [
            { name: '全部' },
            { name: '已完成' },
            { name: '未完成' },
        ]
        // 当前选中的按钮下标
        let buttonIndex = 0;

        render();
        

        addBtnEle.onclick = function () {
            if (addValueEle.value) {
                todosData.push({
                    id: Date.now(),
                    value: addValueEle.value,
                    finished: false
                });
                // 清空输入框内容
                render();
                addValueEle.value = '';
            }
        }

        todosList.onclick = function (e) {
            if (e.target.nodeName == 'LI') {
                const id = e.target.dataset.id;
                const todoItem = todosData.find(item => item.id == id);
                todoItem.finished = !todoItem.finished;
                render();
            }
        }

        buttons.onclick = function (e) {
            if (e.target.nodeName == 'BUTTON') {
                buttonIndex = e.target.dataset.index - 0;
                render();
            }
        }

        function render() {
            todosRender();
            totalRender();
            buttonRender();
        }

        function filterTodos() {
            switch (buttonIndex) {
                case 0:
                    return todosData;
                case 1:
                    return todosData.filter(item => item.finished);
                case 2:
                    return todosData.filter(item => !item.finished);
                default:
                    return [];
            }
        }

        function todosRender() {
            todosList.innerHTML = filterTodos().map(item => {
                if (item.finished) {
                    return `<li class="active" data-id="${item.id}">${item.value}</li>`
                }
                return `<li data-id="${item.id}">${item.value}</li>`

            }).join('')
        }

        function totalRender() {
            finishedTotal.innerText = todosData.filter(item => item.finished).length;
            total.innerText = todosData.length;
        }

        function buttonRender() {
            buttons.innerHTML = buttonsData.map((item, index) => {
                if (index == buttonIndex) {
                    return `<button disabled data-index="${index}">${item.name}</button>`
                }
                return `<button data-index="${index}">${item.name}</button>`
            }).join('')
        }
    </script>
</body>

</html>